<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
// Tabs

$(document).ready(function(){
$('#tabs').tabs();
$("#datepicker").datepicker({inline: true});
$("#top_main_column_left").accordion({ autoHeight: false });
$("#top_main_column_right").accordion({ autoHeight: false });
$("#dialy_main_column_left").accordion({ autoHeight: false });
$("#dialy_main_column_right").accordion({ autoHeight: false });
});
</script>
		<style type="text/css">
			.calender_font{ font: 40% "Trebuchet MS", sans-serif; margin: 0px;}
.edge2sns_table{border-collapse:collapse; padding:0px; margin:2px; border-style:solid; border-color:#e3a1a1; border-width:1px;}
.edge2sns_table td{padding:2px; margin:0px; border-style:solid; border-color:#e3a1a1; border-width:1px;}
.edge2sns_table tr{padding:0px; margin:2px; }
.edge2sns_table th { border: 1px solid #e3a1a1; background: #cc0000 url(css/custom-theme/images/ui-bg_highlight-soft_100_cc0000_1x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.edge2sns_table td .border{padding:1px; margin:0px; border-style:solid; border-color:#e3a1a1; background-color:#cc0000;border-width:1px;}
		</style>	
</head>
<body>

<div id="tabs">
<ul>
	<li class="top"><a href="#tab_top">トップ</a></li>
	<li class="dialy"><a href="#tab_dialy">日記</a></li>
	<li class="config"><a href="#tab_config">設定</a></li>
</ul>
<div id="tab_top" class="contents">
<table class="main_contents">
	<tr>
		<td style="vertical-align:top;">
		<div id="top_main_column_left" style="width:300px">
		<h3><a href="#">マイプロフィール</a></h3>
		<div id="myProfile" class="ui-widget-content" style="height:230px">
		<img src="img/thumbnail.jpg"/>
		<p>もうり</p>
		</div>
		<h3><a href="#">フレンド一覧</a></h3>
		<div id="userList" class="ui-widget-content"></div>
		<h3><a href="#">コミュニティ一覧</a></h3>
		<div id="communityList" class="ui-widget-content">コミュニティ一覧</div>
		</div>
		</td>
		<td style="vertical-align:top;">
		<div id="top_main_column_right" style="width:700px">
		<h3><a href="#">新着日記</a></h3>
		<div id="myProfile" class="ui-widget-content">
		<div>フレンド最新日記</div>
		<ul>
		<li>9/12:ほげほげほげほげほげ</li>
		<li>9/12:ほげほげほげほげほげ</li>
		<li>9/12:ほげほげほげほげほげ</li>
		<li>9/12:ほげほげほげほげほげ</li>
		<li>9/12:ほげほげほげほげほげ</li>
		<li>9/12:ほげほげほげほげほげ</li>
		</ul>
		</div>
		<h3><a href="#">コミュニティ更新情報</a></h3>
		<div id="userList" class="ui-widget-content">コミュニティ更新情報</div>
		</div>
		</td>
	</tr>
</table>
</div>

<div id="tab_dialy" class="contents">
<table>
	<tr>
		<td style="vertical-align:top;">
		<div id="dialy_main_column_left" style="width:230px;height:300px">
		
		<h3><a href="#">カレンダー</a></h3>
		<div id="calender" class="ui-widget-content">
		<div class="calender_font">
		<div id="datepicker"></div>
		</div>
		</div>
		</div>
		</td>
		<td style="vertical-align:top;">
		<div id="dialy_main_column_right" style="width:700px; height:1000px;">
		<h3><a href="#">日記を書く</a></h3>
		<div id="dialy_witer" class="ui-widget-content">
		<table class="edge2sns_table">
		<tr><th>タイトル</th><td><input type="text" size="50"/></td></tr>
		<tr><th colspan="2">本文</th></tr>
		<tr><td colspan="2"><textarea cols="60" rows="5"></textarea></td></tr>
		<tr><td colspan="2" align="center"><input type="button" value="入力内容を確認する"/></td></tr>
		</table>
		</div>

		<h3><a href="#">日記一覧</a></h3>
		<div id="userList" class="ui-widget-content">
    <div class="ui-widget-content">
        <div class="ui-widget-header">
        9/12:ふがふがふがふが<a href="#">(表示)</a>
        </div>
        <div class="subcontents">
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        </div>
	</div>
        <div>
        &nbsp;
    	</div>
    <div class="ui-widget-content">
        <div class="ui-widget-header">
        9/12:ふがふがふがふが<a href="#">(表示)</a>
        </div>
        <div class="subcontents">
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        </div>
	</div>
        <div>
        &nbsp;
    	</div>

    <div class="ui-widget-content">
        <div class="ui-widget-header">
        9/12:ふがふがふがふが<a href="#">(表示)</a>
        </div>
        <div class="subcontents">
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        </div>
	</div>
        <div>
        &nbsp;
    	</div>

    <div class="ui-widget-content">
        <div class="ui-widget-header">
        9/12:ふがふがふがふが<a href="#">(表示)</a>
        </div>
        <div class="subcontents">
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        ふがふがふがふがふがふがふがふがふがふが
        </div>
	</div>
        <div>
        &nbsp;
    	</div>


		</div>

		</div>
		</td>
	</tr>
</table>
</div>


</div>

</body>
</html>
